<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/main-layout.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="title">
        <h:outputText value="#{msg.create_child_title}"></h:outputText>
    </ui:define>
    <ui:define name="content">
        <f:view>
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages globalOnly="true" errorStyle="color: red" infoStyle="color: green" />
            </h:panelGroup>
            <h4>#{msg.create_child_header}</h4>
            <span class="required-label">* required</span>
            <p/>
            <h:form>
                <h:panelGrid columns="3">
                    <h:outputLabel styleClass="formLabel required" value="#{msg.parent_id_label}"
                                   for="parentId" />
                    <h:selectOneMenu styleClass="formSelect" id="parentId" value="#{child.parentId}"
                                     title="#{msg.parentid_label}" required="true"
                                     onchange="#{formList.childrenIDs}"
                                     converterMessage="#{msg.required_parentid_message}">
                        <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                        <f:selectItems value="#{formList.parentIDs}" />
                    </h:selectOneMenu>
                    <h:message for="parentId"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.first_name_label}"
                                   for="firstName" />
                    <h:inputText styleClass="formTextBox" id="firstName" value="#{child.firstName}"
                                 title="#{msg.first_name_label}" required="true"
                                 requiredMessage="#{msg.required_first_name_message}"/>
                    <h:message for="firstName"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.last_name_label}"
                                   for="lastName" />
                    <h:inputText styleClass="formTextBox" id="lastName" value="#{child.lastName}"
                                 title="#{msg.last_name_label}" required="true"
                                 requiredMessage="#{msg.required_last_name_message}"/>
                    <h:message for="lastName"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.birth_date_label}"
                                   for="birthDate" />
                    <p:calendar id="birthDate" value="#{child.birthDate}" title="#{msg.birth_date_label}"
                                required="true" requiredMessage="#{msg.required_birth_date_message}"
                                mode="popup" navigator="true" pattern="dd/MM/yyyy" mindate="${child.minDate}"
                                maxdate="${child.maxDate}">
                    </p:calendar>
                    <h:message for="birthDate"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="#{msg.nickname_label}" for="nickname" />
                    <h:inputText styleClass="formTextBox" id="nickname" value="#{child.nickname}"
                                 title="#{msg.nickname_label}" />
                    <h:message for="nickname"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="#{msg.comments_label}" for="comments" />
                    <h:inputText styleClass="formTextBox" id="comments" value="#{child.comments}"
                                 title="#{msg.comments_label}" />
                    <h:message for="comments"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="#{msg.gender_label}" for="gender" />
                    <h:selectOneMenu styleClass="formSelect" id="gender" value="#{child.gender}" required="true"
                                     converterMessage="#{msg.required_gender_message}">
                        <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                        <f:selectItems value="#{child.genders}" var="genderItem" itemValue="#{genderItem}"
                                       itemLabel="#{genderItem.label}" />
                    </h:selectOneMenu>
                    <h:message for="gender"  errorStyle="color: red" />
                    <h:commandButton styleClass="formButton" action="#{home.mainMenu}" immediate="true"
                                     value="#{msg.home_button_label}" />
                    <h:commandButton styleClass="formButton" action="#{child.create}"
                                     value="#{msg.submit_button_label}"/>
                </h:panelGrid>
                <br />
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>